<template>
	<el-tabs v-model="data.activeTab" class="demo-tabs" @tab-click="handleClickTab">
		<el-tab-pane label="充电订单" name="charge">
			<Table v-if="data.activeTab === 'charge'" ref="tableRef" :url="URL_PAGINGHISTORYORDERT"
				:columns="data.columns" :handles="data.handles" :query="data.query" :toolbar="data.toolbar"></Table>
			<!-- 弹窗开始 -->
			<el-dialog v-model="data.dialogVisible" title="提示" width="430" class="qc-custom-dialog">
				<div class="dialog-tip">确认需要向流量方补推订单结算数据?</div>
				<el-form ref="ruleFormRef" label-width="120px" class="dialog-form-wrap">
					<el-form-item label="流量方：">
						<div>
							{{ data.orgName || '' }}
						</div>
					</el-form-item>
					<el-form-item label="流量方流水号：">
						<div>
							{{ data.flowStartChargeSeq || '' }}
						</div>
					</el-form-item>
				</el-form>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="hide">取消</el-button>
						<el-button type="primary" v-btnAntiShake="onSubmit">
							确认
						</el-button>
					</span>
				</template>
			</el-dialog>
			<!-- 弹窗结束 -->
		</el-tab-pane>
		<el-tab-pane label="占用订单" name="occupy">
			<Table v-if="data.activeTab === 'occupy'" ref="tableOccupyRef" :url="URL_PAGINGOCCUPYORDER"
				:columns="occupyData.columns" :handles="occupyData.handles" :query="occupyData.query"
				:toolbar="occupyData.toolbar" :params="{ statusList: [1, 2] }"></Table>
		</el-tab-pane>
	</el-tabs>
</template>

<script lang="ts" setup name="historicalOrderList">
	import Table from '@/components/table/index.vue';
	import { queryDicByParent } from '@/service/apis/api';
	import { exportFile } from '@/utils/utils';
	import {
		URL_PAGINGHISTORYORDERT,
		EXPORT_HISTORYORDER,
		URL_PAGINGOCCUPYORDER,
		EXPORT_OCCUPYORDER,
		historyOrderRetrofit,
	} from '@/service/apis/order';
	import moment from 'moment';

	const router = useRouter();

	const tableRef = ref();
	const tableOccupyRef = ref();

	const data = reactive({
		pickDate: null as any,
		activeTab: 'charge',
		dialogVisible: false,
		orgName: '',
		flowStartChargeSeq: '',
		orderId: '',
		columns: [
			{
				prop: 'startChargeSeq',
				label: '充电单号',
				width: 260,
			},
			{
				prop: 'accountNumber',
				label: '用户账号',
				width: 160,
			},
			{
				prop: 'mobile',
				label: '用户手机号',
				width: 120,
			},
			{
				prop: 'orgName',
				label: '归属企业',
				width: 160,
			},
			{
				prop: 'plateNumber',
				label: '充电车辆',
			},
			{
				prop: 'chargeVin',
				label: '车辆VIN码',
				template: (row : any, index : number) => {
					return row?.chargeVin?.toString() || '--';
				},
				width: 120,
			},
			{
				prop: 'chargeType',
				label: '充电方式',
				dic: [] as any,
				type: Number,
				width: 120,
			},
			{
				prop: 'equipmentOwnerName',
				label: '电桩固件',
			},
			{
				prop: 'totalAmount',
				label: '订单金额',
			},
			{
				prop: 'actualAmount',
				label: '实收金额',
			},
			{
				prop: 'startTime',
				label: '开始充电时间',
				width: 160,
			},
			{
				prop: 'endTime',
				label: '结束充电时间',
				width: 160,
			},
			{
				prop: 'orderCloseTime',
				label: '订单支付时间',
				width: 160,
			},
			{
				prop: 'chargedTime',
				label: '充电时长',
			},
			{
				prop: 'totalPower',
				label: '已充电量（度）',
				width: 140,
			},
			{
				prop: 'startSoc',
				label: '起始SOC（%）',
				width: 120,
				template: (row : any, index : number) => {
					return row?.startSoc?.toString() || '--';
				},
			},
			{
				prop: 'endSoc',
				label: '结束SOC（%）',
				width: 120,
				template: (row : any, index : number) => {
					return row?.endSoc?.toString() || '--';
				},
			},
			{
				prop: 'stationName',
				label: '电站名称',
				width: 160,
			},
			{
				prop: 'connectorCode',
				label: '终端编码',
				width: 140,
			},
			// {
			// 	prop: 'operatorName',
			// 	label: '运营商',
			// 	width: 160,
			// },
			{
				prop: 'chargeSource',
				label: '订单来源',
				dic: [] as any,
				type: Number,
			},
			{
				prop: 'stopReason',
				label: '停止码',
				width: 120,
			},
			{
				prop: 'stopMsg',
				label: '停止信息',
				width: 120,
			},
			// {
			// 	prop: 'flowStartChargeSeq',
			// 	label: '流量方流水号',
			// 	width: 120,
			// },
			// {
			// 	prop: 'operatorSerialNumber',
			// 	label: '运营商流水号',
			// 	width: 120,
			// },
		],
		handles: [
			{
				label: '详情',
				permission: 'historicalOrderList.see',
				handle: (row : any) => {
					console.log('详情---', row);
					router.push({
						name: 'historicalOrderDetail',
						query: { id: row.orderId, type: 'station' },
					});
				},
			},
			{
				label: '补推订单',
				permission: 'historicalOrderList.retrofit',
				hideFun: (row : any) => {
					return row.chargeSource !== 2;
				},
				handle: (row : any) => {
					data.orgName = row.orgName;
					data.flowStartChargeSeq = row.flowStartChargeSeq;
					data.orderId = row.orderId;
					data.dialogVisible = true;
				},
			},
		],
		toolbar: [
			{
				label: '导出',
				permission: 'historicalOrderList.export',
				icon: 'icon-export',
				type: 'primary',
				plain: true,
				handle: (row : any) => {
					const startData = tableRef?.value.getForm().startChargingStartTime;
					const startData1 = tableRef?.value.getForm().startChargingEndTime;
					const endData = tableRef?.value.getForm().endChargingStartTime;
					const endData1 = tableRef?.value.getForm().endChargingEndTime;
					const orderCloseData = tableRef?.value.getForm().orderCloseStartTime;
					const orderCloseData1 = tableRef?.value.getForm().orderCloseEndTime;
					const day = moment(startData1).diff(moment(startData), 'day');
					const day1 = moment(endData1).diff(moment(endData), 'day');
					const day2 = moment(orderCloseData1).diff(
						moment(orderCloseData),
						'day'
					);
					console.log(day, day1, day2);

					if (
						((startData || day > 0) && day < 63) ||
						((endData || day1 > 0) && day1 < 63) ||
						((orderCloseData || day2 > 0) && day2 < 63)
					) {
						exportFile(
							EXPORT_HISTORYORDER,
							'电站历史订单',
							tableRef.value?.getForm()
						);
					} else {
						ElMessageBox.alert(
							'单次导出最多支持导出周期为2个月的数据，请按时间筛选导出对象后再导出。',
							'提示',
							{
								confirmButtonText: '确认',
								type: 'warning',
							}
						);
					}
				},
			},
		],
		query: [
			{
				label: '手机号',
				prop: 'mobile',
				comName: 'input',
				props: {
					placeholder: '请输入用户手机号',
				},
			},
			{
				label: '充电单号',
				prop: 'startChargeSeq',
				comName: 'input',
				props: {
					placeholder: '请输入充电单号',
				},
			},
			{
				label: '终端编码',
				prop: 'connectorCode',
				comName: 'input',
				props: {
					placeholder: '请输入终端编码',
				},
			},
			{
				label: '开始充电',
				prop: 'startData',
				comName: 'date',
				keys: ['startChargingStartTime', 'startChargingEndTime'],
				props: {
					type: 'daterange',
					calendarChange: (pick : any) => {
						let hasSelectDate = pick !== null && pick.length > 0;
						data.pickDate = hasSelectDate ? pick[0] : null;
					},
					change: (time : any) => {
						if (!time) {
							data.pickDate = null;
						}
					},
					disabledDate: (time : any) : any => {
						if (data.pickDate) {
							const checkTime = data.pickDate.getTime();
							const startTime = checkTime - 62 * 86400 * 1000; // 前面限制62天
							const endTime = checkTime + 62 * 86400 * 1000; // 后面限制62天
							return time.getTime() > endTime || time.getTime() < startTime;
						} else {
							return false;
						}
					},
				},
			},
			{
				label: '结束充电',
				prop: 'endData',
				comName: 'date',
				keys: ['endChargingStartTime', 'endChargingEndTime'],
				props: {
					type: 'daterange',
					calendarChange: (pick : any) => {
						let hasSelectDate = pick !== null && pick.length > 0;
						data.pickDate = hasSelectDate ? pick[0] : null;
					},
					change: (time : any) => {
						if (!time) {
							data.pickDate = null;
						}
					},
					disabledDate: (time : any) : any => {
						if (data.pickDate) {
							const checkTime = data.pickDate.getTime();
							const startTime = checkTime - 62 * 86400 * 1000; // 前面限制62天
							const endTime = checkTime + 62 * 86400 * 1000; // 后面限制62天
							return time.getTime() > endTime || time.getTime() < startTime;
						} else {
							return false;
						}
					},
				},
			},
			{
				label: '用户账号',
				prop: 'accountNumber',
				comName: 'input',
				props: {
					placeholder: '请输入用户账号',
				},
			},
			{
				label: '归属企业',
				prop: 'orgName',
				comName: 'input',
				props: {
					placeholder: '请输入归属企业',
				},
			},
			{
				label: '订单来源',
				prop: 'chargeSource',
				comName: 'select',
				props: {
					placeholder: '请选择订单来源',
					options: [] as any,
				},
			},
			{
				label: '电站名称',
				prop: 'stationName',
				comName: 'input',
				props: {
					placeholder: '请输入电站名称',
				},
			},
			{
				label: '订单结算',
				prop: 'orderCloseData',
				comName: 'date',
				keys: ['orderCloseStartTime', 'orderCloseEndTime'],
				props: {
					type: 'daterange',
					calendarChange: (pick : any) => {
						let hasSelectDate = pick !== null && pick.length > 0;
						data.pickDate = hasSelectDate ? pick[0] : null;
					},
					change: (time : any) => {
						if (!time) {
							data.pickDate = null;
						}
					},
					disabledDate: (time : any) => {
						if (data.pickDate) {
							const checkTime = data.pickDate.getTime();
							const startTime = checkTime - 62 * 86400 * 1000; // 前面限制62天
							const endTime = checkTime + 62 * 86400 * 1000; // 后面限制62天
							return time.getTime() > endTime || time.getTime() < startTime;
						} else {
							return false;
						}
					},
				},
			},
			{
				label: '充电方式',
				prop: 'chargeType',
				comName: 'select',
				props: {
					placeholder: '请选择充电方式',
					options: [] as any,
				},
			},
			// {
			// 	label: '运营商',
			// 	prop: 'operatorName',
			// 	comName: 'input',
			// 	props: {
			// 		placeholder: '请输入运营商',
			// 	},
			// },
			{
				label: '车辆VIN',
				prop: 'chargeVin',
				comName: 'input',
				props: {
					placeholder: '请输入车辆VIN码',
				},
			},
			{
				label: '充电车辆',
				prop: 'plateNumber',
				comName: 'input',
				props: {
					placeholder: '请输入充电车辆',
				},
			},
			{
				label: '结算依据',
				prop: 'settleSource',
				comName: 'select',
				props: {
					placeholder: '请选择结算依据',
					options: [] as any,
				},
			},
			{
				label: '停止码',
				prop: 'stopReason',
				comName: 'input',
				props: {
					placeholder: '请输入停止码',
				},
			},
			// {
			// 	label: '流量方流水号',
			// 	prop: 'flowStartChargeSeq',
			// 	comName: 'input',
			// 	props: {
			// 		placeholder: '请输入流量方流水号',
			// 	},
			// },
			// {
			// 	label: '运营商流水号',
			// 	prop: 'operatorSerialNumber',
			// 	comName: 'input',
			// 	props: {
			// 		placeholder: '请输入运营商流水号',
			// 	},
			// },
		],
	});
	const occupyData = reactive({
		columns: [
			{
				prop: 'orderId',
				label: '占用订单号',
				width: 260,
			},
			{
				prop: 'accountNumber',
				label: '用户账号',
				width: 160,
			},
			{
				prop: 'orgType',
				label: '是否实际扣费',
				width: 140,
				dic: [] as any,
				type: Number,
			},
			{
				prop: 'orgName',
				label: '归属企业',
				width: 160,
			},
			{
				prop: 'stationName',
				label: '电站名称',
				width: 160,
			},
			{
				prop: 'connectorName',
				label: '占用终端名称',
				width: 160,
			},
			{
				prop: 'connectorId',
				label: '占用终端编码',
				width: 160,
			},
			{
				prop: 'durationHours',
				label: '占用时长',
			},
			{
				prop: 'oughtAmount',
				label: '订单计费',
			},
			{
				prop: 'amount',
				label: '占用收费',
				template: (row : any, index : number) => {
					if (row.amount) {
						return `${row.amount}元`;
					} else if (row.amount == 0) {
						return `${row.amount}元`;
					} else {
						return '--';
					}
				},
			},
			{
				prop: 'chargeSource',
				label: '订单来源',
				dic: [] as any,
				type: Number,
			},
			{
				prop: 'status',
				label: '订单结束原因',
				width: 160,
				dic: [] as any,
				type: Number,
			},
			{
				prop: 'payTime',
				label: '订单支付时间',
				width: 160,
			},
		],
		handles: [
			{
				label: '详情',
				permission: 'historicalOrderList.see',
				handle: (row : any) => {
					console.log('详情---', row);
					router.push({
						name: 'occupyOrderDetail',
						query: { id: row.id },
					});
				},
			},
		],
		toolbar: [
			{
				label: '导出',
				permission: 'historicalOrderList.export',
				icon: 'icon-export',
				type: 'primary',
				plain: true,
				handle: (row : any) => {
					exportFile(
						EXPORT_OCCUPYORDER,
						'电站占用订单',
						tableOccupyRef.value?.getForm()
					);
				},
			},
		],
		query: [
			{
				label: '手机号',
				prop: 'mobile',
				comName: 'input',
				props: {
					placeholder: '请输入手机号',
				},
			},
			{
				label: '占用订单号',
				prop: 'orderId',
				comName: 'input',
				props: {
					placeholder: '请输入占用订单号',
				},
			},
			{
				label: '占用终端编码',
				prop: 'connectorId',
				comName: 'input',
				props: {
					placeholder: '请输入占用终端编码',
				},
			},
			{
				label: '占用开始时间',
				prop: 'startData',
				comName: 'date',
				keys: ['startTime', 'endTime'],
				props: {
					type: 'daterange',
				},
			},
			{
				label: '用户账号',
				prop: 'accountNumber',
				comName: 'input',
				props: {
					placeholder: '请输入用户账号',
				},
			},
			{
				label: '归属企业',
				prop: 'orgName',
				comName: 'input',
				props: {
					placeholder: '请输入归属企业',
				},
			},
			{
				label: '订单来源',
				prop: 'chargeSource',
				comName: 'select',
				props: {
					placeholder: '请选择订单来源',
					options: [] as any,
				},
			},
			{
				label: '电站名称',
				prop: 'stationName',
				comName: 'input',
				props: {
					placeholder: '请输入电站名称',
				},
			},

			{
				label: '订单结束原因',
				prop: 'status',
				comName: 'select',
				props: {
					placeholder: '请选择订单结束原因',
					options: [] as any,
				},
			},
			{
				label: '是否实际扣费',
				prop: 'orgType',
				comName: 'select',
				props: {
					placeholder: '请选择是否实际扣费',
					options: [] as any,
				},
			},
		],
	});

	// 弹窗取消
	const hide = () => {
		data.dialogVisible = false;
	};

	// 弹窗确认
	const onSubmit = () => {
		data.dialogVisible = false;
		console.log(data.orderId);

		historyOrderRetrofit(data.orderId).then((res : any) => {
			tableRef.value.getData();
		});
	};
	if (import.meta.env.VITE_ENV_TYPE === 'lznt') {
		data.columns.splice(18, 0, {
			prop: 'shortcutCode',
			label: '快捷码',
		});
		data.query[2] = {
			label: '快捷码',
			prop: 'shortcutCode',
			comName: 'input',
			props: {
				placeholder: '请输入快捷码',
			},
		};

		data.query.splice(3, 0, {
			label: '终端编码',
			prop: 'connectorCode',
			comName: 'input',
			props: {
				placeholder: '请输入终端编码',
			},
		});

		occupyData.query[2] = {
			label: '占用终端快捷码',
			prop: 'shortcutCode',
			comName: 'input',
			props: {
				placeholder: '请输入占用终端快捷码',
			},
		};
		occupyData.query.splice(3, 0, {
			label: '占用终端编码',
			prop: 'connectorId',
			comName: 'input',
			props: {
				placeholder: '请输入占用终端编码',
			},
		});
		occupyData.columns.splice(7, 0, {
			prop: 'shortcutCode',
			label: '占用终端快捷码',
			width: 120,
		});
	}

	if (import.meta.env.VITE_ENV_TYPE === 'zy') {
		data.query[3] = {
			label: '开始充电',
			prop: 'startData',
			comName: 'date',
			keys: ['startChargingStartTime', 'startChargingEndTime'],
			props: {
				type: 'datetimerange',
				calendarChange: (pick : any) => {
					let hasSelectDate = pick !== null && pick.length > 0;
					data.pickDate = hasSelectDate ? pick[0] : null;
				},
				change: (time : any) => {
					if (!time) {
						data.pickDate = null;
					}
				},
				disabledDate: (time : any) : any => {
					if (data.pickDate) {
						const checkTime = data.pickDate.getTime();
						const startTime = checkTime - 62 * 86400 * 1000; // 前面限制62天
						const endTime = checkTime + 62 * 86400 * 1000; // 后面限制62天
						return time.getTime() > endTime || time.getTime() < startTime;
					} else {
						return false;
					}
				},
			},
		};
		data.query[4] = {
			label: '结束充电',
			prop: 'endData',
			comName: 'date',
			keys: ['endChargingStartTime', 'endChargingEndTime'],
			props: {
				type: 'datetimerange',
				calendarChange: (pick) => {
					let hasSelectDate = pick !== null && pick.length > 0;
					data.pickDate = hasSelectDate ? pick[0] : null;
				},
				change: (time) => {
					if (!time) {
						data.pickDate = null;
					}
				},
				disabledDate: (time : any) => {
					if (data.pickDate) {
						const checkTime = data.pickDate.getTime();
						const startTime = checkTime - 62 * 86400 * 1000; // 前面限制62天
						const endTime = checkTime + 62 * 86400 * 1000; // 后面限制62天
						return time.getTime() > endTime || time.getTime() < startTime;
					} else {
						return false;
					}
				},
			},
		};
		data.query[9] = {
			label: '订单结算',
			prop: 'orderCloseData',
			comName: 'date',
			keys: ['orderCloseStartTime', 'orderCloseEndTime'],
			props: {
				type: 'datetimerange',
				calendarChange: (pick) => {
					let hasSelectDate = pick !== null && pick.length > 0;
					data.pickDate = hasSelectDate ? pick[0] : null;
				},
				change: (time) => {
					if (!time) {
						data.pickDate = null;
					}
				},
				disabledDate: (time : any) => {
					if (data.pickDate) {
						const checkTime = data.pickDate.getTime();
						const startTime = checkTime - 62 * 86400 * 1000; // 前面限制62天
						const endTime = checkTime + 62 * 86400 * 1000; // 后面限制62天
						return time.getTime() > endTime || time.getTime() < startTime;
					} else {
						return false;
					}
				},
			},
		};
	}

	queryDicByParent({
		listDtos: [
			'settlementBasic',
			'chargeSourceEnum',
			'chargeTypeEnum',
			'status',
			'orgType',
		],
	}).then((res : any) => {
		if (res) {
			data.query[6].props.options = [...res.chargeSourceEnum];
			data.query[9].props.options = [...res.chargeTypeEnum];
			data.query[12].props.options = [...res.settlementBasic];
			data.columns[6].dic = [...res.chargeTypeEnum];
			occupyData.query[4].props.options = [...res.chargeSourceEnum];
			occupyData.query[7].props.options = [...res.status];
			occupyData.query[8].props.options = [...res.orgType];
			occupyData.columns[2].dic = [...res.orgType];
			occupyData.columns[10].dic = [...res.chargeSourceEnum];
			occupyData.columns[11].dic = [...res.status];
			if (import.meta.env.VITE_ENV_TYPE === 'lznt') {
				data.query[8].props.options = [...res.chargeSourceEnum];
				data.query[11].props.options = [...res.chargeTypeEnum];
				data.query[14].props.options = [...res.settlementBasic];
				data.columns[6].dic = [...res.chargeTypeEnum];
				data.columns[20].dic = [...res.chargeSourceEnum];
				occupyData.query[7].props.options = [...res.chargeSourceEnum];
				occupyData.query[9].props.options = [...res.status];
				occupyData.query[10].props.options = [...res.orgType];
				occupyData.columns[12].dic = [...res.status];
			} else {
				data.query[7].props.options = [...res.chargeSourceEnum];
				data.query[10].props.options = [...res.chargeTypeEnum];
				data.query[13].props.options = [...res.settlementBasic];
				data.columns[19].dic = [...res.chargeSourceEnum];
				occupyData.query[6].props.options = [...res.chargeSourceEnum];
				occupyData.query[8].props.options = [...res.status];
				occupyData.query[9].props.options = [...res.orgType];
			}
			occupyData.columns[10].dic = [...res.chargeSourceEnum];
		}
	});
	const handleClickTab = (e : any) => { };
</script>